<template>
  <view>
    <!-- 自定义导航栏 -->
    <u-navbar  title="消息中心" title-color="#FFFFFF"  :background="background" back-icon-color="#FFFFFF">
      <text class="navbar-text" slot="right">全部已读</text>
    </u-navbar>
    <!-- 自定义导航栏 -->
    	<view>
    			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" inactive-color="#8a95b3"
    			 swiperWidth="750"  bg-color="#000000" active-color="#FFFFFF"></u-tabs-swiper>
    		</view>
    		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
    			<swiper-item class="swiper-item" >
    				<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
    					<view class="system">
    					  <text class="sys-title">vtn价格上调公告</text>
                <text class="sys-content">vtn价格上调公告</text>
                <text sys-time>2014/04/23 12:23</text>
    					</view>
              <view class="system">
                <text class="sys-title">vtn价格上调公告</text>
                <text class="sys-content">vtn价格上调公告</text>
                <text sys-time>2014/04/23 12:23</text>
              </view>
    				</scroll-view>
    			</swiper-item>
          <swiper-item class="swiper-item" >
          	<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
          	<view class="system" v-for="(item,i) in listcon" :key="i">
          	  <text class="sys-title">{{item.title}}</text>
          	  <text class="sys-content">{{item.content}}</text>
          	  <text sys-time>{{item.time}}</text>
          	</view>
          	
          	</scroll-view>
          </swiper-item>
    		</swiper>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        background:{
          	backgroundColor: '#001f3f',
        },
        list: [{
        					name: '个人消息'
        				}, {
        					name: '系统公告'
        				}],
        				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
        				current: 0, // tabs组件的current值，表示当前活动的tab选项
        				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
                listcon:[{
                  title:'vtn价格上调公告',
                  content:'vtn价格上调公告',
                  time:'2014/04/23 12:23'
                },{
                  title:'vtn价格上调公告',
                  content:'vtn价格上调公告',
                  time:'2014/04/23 12:23'
                },{
                  title:'vtn价格上调公告',
                  content:'vtn价格上调公告',
                  time:'2014/04/23 12:23'
                },{
                  title:'vtn价格上调公告',
                  content:'vtn价格上调公告',
                  time:'2014/04/23 12:23'
                }]
      }
    },
    methods: {
      	// tabs通知swiper切换
      			tabsChange(index) {
      				this.swiperCurrent = index;
      			},
      			// swiper-item左右移动，通知tabs的滑块跟随移动
      			transition(e) {
      				let dx = e.detail.dx;
      				this.$refs.uTabs.setDx(dx);
      			},
      			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
      			// swiper滑动结束，分别设置tabs和swiper的状态
      			animationfinish(e) {
      				let current = e.detail.current;
      				this.$refs.uTabs.setFinishCurrent(current);
      				this.swiperCurrent = current;
      				this.current = current;
      			},
      			// scroll-view到底部加载更多
      			onreachBottom() {
      				
      			}
    }
  }
</script>

<style>
  .navbar-text{
    margin-right: 30rpx;
    color: #FFFFFF;
  }
  .system{
    display: flex;
    flex-direction: column;
    color: #7b7e91;
    border-bottom: 1px solid #0a0a0c;
    font-size: 24rpx;
    padding: 20rpx;
    height: 160rpx;
  }
  .sys-title{
    font-size: 30rpx;
    color: #FFFFFF;
    margin-bottom: 6rpx;
  }
  .sys-content{
    margin-bottom: 10rpx;
  }
</style>
